<template>
  <!-- 活动管理-社区管理页面 -->
  <div class="app-container detail calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search" />
    </section>
    <!-- 其他操作 -->
    <section class="filter-container">
      <section style="float: right">
        <el-button class="filter-item" type="primary" size="small" @click="exportFile">导出</el-button>
        <el-button class="filter-item" type="danger" size="small" @click="delRows">批量删除</el-button>
      </section>
    </section>
    <!-- 表格 -->
    <el-table
      :data="tableList"
      v-loading="loading"
      element-loading-text="正在查询中。。。"
      stripe
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="姓名" prop="create_username"></el-table-column>
      <el-table-column align="center" label="部门" prop="dept_name"></el-table-column>
      <el-table-column align="center" label="结婚证" prop="file_path">
        <template slot-scope="scope">
          <div class="img-box">
            <viewer>
              <img v-for="(src,index) in [scope.row.file_path]" :src="src" :key="index" />
            </viewer>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份证正面" prop="improvement_scheme">
        <template slot-scope="scope">
          <div class="img-box">
            <viewer>
              <img v-for="(src,index) in [scope.row.improvement_scheme]" :src="src" :key="index" />
            </viewer>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份证反面" prop="benefit_calculation">
        <template slot-scope="scope">
          <div class="img-box">
            <viewer>
              <img v-for="(src,index) in [scope.row.benefit_calculation]" :src="src" :key="index" />
            </viewer>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="提交时间" prop="create_time"></el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <p
            :style="{color:audit_status[scope.row.audit_status].type}"
          >{{audit_status[scope.row.audit_status].name}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="delRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList" />
    </section>
  </div>
</template>
<script>
import { searchTool } from "@/utils";
import {
  advice_list,
  advice_delete,
  advice_deleteAll,
  advice_exportExcel
} from "@/api/advice";
import UE from "@/components/Ueditor";
import SoPagination from "@/components/SoPagination";
import SoToolBar from "@/components/SoToolBar";
import { audit_status, toolData } from "./marry";
import sizeTemp from "@/components/draggableSize";

export default {
  name: "marry",
  components: { SoPagination, SoToolBar, sizeTemp, UE },
  data() {
    return {
      data: [],
      toolData: toolData, //搜索工具栏初始化
      loading: false,
      tableList: [],
      multipleSelection: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1, moule_id: 3 },
      audit_status: audit_status,
      dialog: { isShow: false },
      fullscreen: false,
      fromStatus: "",
      ossPublicUrl: localStorage.getItem("ossPublicUrl"),
      companyId: localStorage.getItem("companyId") - 0,
      form: { file_path: "" },
      defaultMsg: { val1: "", val2: "" }
    };
  },
  methods: {
    async delRow(data) {
      let Id = data.id; //删除
      try {
        let res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          let { data } = await advice_delete({ id: Id });
          if (data.status == 100) {
            this.$message.success("删除成功");
            this.initList();
            this.loading = false;
          }
        }
      } catch (error) {
        this.loading = false;
        console.log(error, "error");
      }
    },
    async pass(num, e) {
      //待审核为0,通过为1,不通过为2
      e.audit_status = num;
      this.loading = true;
      await marry_edit(e);
      this.loading = false;
      this.initList();
    },
    // 导出文件
    exportFile() {
      if (!this.multipleSelection.length) {
        this.$message.warning("请先选择需要导出的单元");
        return;
      }
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "姓名",
          "部门",
          "结婚证",
          "身份证正面",
          "身份证反面",
          "提交时间"
        ];
        const filterVal = [
          "create_username",
          "dept_name",
          "file_path",
          "improvement_scheme",
          "benefit_calculation",
          "create_time"
        ];
        const tableList = this.multipleSelection;
        const data = this.formatJson(filterVal, tableList);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "结婚申请人员统计"
        });
        this.initList();
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    async delRows() {
      //批量删除
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      try {
        const res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          const { data } = await advice_deleteAll({ array: ids });
          if (data.status == 100) {
            this.$message.success("删除成功");
            this.loading = false;
          }
          this.initList();
        }
      } catch (error) {
        this.loading = false;
        console.log(error, "error");
      }
    },
    search() {
      //搜索
      let keyWords = {
        key: "searchDate",
        names: ["create_starttime", "create_endtime"]
      };
      let examinehWords = {
        key: "examinehDate",
        names: ["audit_starttime", "audit_endtime"]
      };
      this.listQuery = searchTool(this.listQuery, keyWords, examinehWords);
      this.initList();
    },
    async initList() {
      this.loading = true;
      const query = {
        ...this.listQuery,
        company_id: localStorage.getItem("companyId") - 0
      };
      let { data } = await advice_list(query);
      if (data.status == 100) {
        this.loading = false;
        this.tableList = data.data.rows;
        this.listQuery.total = data.data.results;
      }
    },
    handleSelectionChange(e) {
      //
      this.multipleSelection = e;
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;
$color: #606266;
span {
  font-size: 13px;
  color: $color;
}
.ali-zhiding {
  color: #009900;
  font-size: 20px;
}
.avatar-uploader {
  .el-upload {
    border: $border;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}
.avatar-uploader-icon {
  border: $border;
  font-size: 28px;
  color: #8c939d;
  width: $picture-size;
  height: $picture-size;
  line-height: $picture-size;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
}
.avatar {
  width: 60%;
  display: block;
  border-radius: 5px;
  cursor: pointer;
}
.img-box {
  width: 144px;
  height: 90px;
  overflow: hidden;
  display: inline-block;
  justify-content: center;
  img {
    width: 100%;
  }
}
</style>
